﻿

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0px; border: 0; font-size: 100%; outline: none; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; overflow-x: hidden; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* always display scrollbars */
body { font: 16px/1.8 "Microsoft Yahei","微软雅黑",sans-serif; margin: 0 auto; color: #666; background-color: #fff; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
input { outline: none; }
img { border: 0; }
input[type="text"], input[type="button"], input[type="submit"], input[type="reset"] { -webkit-appearance: none; border-radius: 0; }
textarea { -webkit-appearance: none; border-radius: 0; outline: none; }
select { outline: none; }
select::-ms-expand { display: none; }
::-moz-selection { background: #b0b0b0; color: #fff; text-shadow: none; }
::selection { background: #b0b0b0; color: #fff; text-shadow: none; }
a { text-decoration: none; blr: expression(this.onFocus=this.blur()); cursor: pointer; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }
a:link, a:visited { text-decoration: none; }
a:active, a:hover { text-decoration: none; }
.clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0px; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/*index style*/

.bgf5 { background-color: #F5F5F5; }
.iboxT a:link, .iboxT a:visited { color: #323232; }
.iboxT a:active, .iboxT a:hover { color: #E60012; }
.iboxT { padding: 5% 0px 3%; text-align: center; color: #b4b4b4; }
.iboxT .zh { font: 45px/1.4 "microsoft yahei"; color: #0065b6; margin-bottom: 15px; }
.iboxT .mz { color: #b4b4b4; letter-spacing: 4px; text-transform: uppercase; position: relative; padding: 0px 15px; }
.iboxT .mz .i1, .iboxT .mz .i2 { height: 1px; background-color: #d2d2d2; position: absolute; top: 50%; width: 112px; overflow: hidden; display: block; }
.iboxT .mz .i1 { right: 100%; }
.iboxT .mz .i2 { left: 100%; }
.moreR { position: absolute; right: 0px; bottom: 10%; display: block; width: 236px; padding: 0px 18px; height: 70px; line-height: 70px; font-size: 16px; color: #323232; background-color: #ffffff; z-index: 10; }
.moreR .ico { background: url(../images/more_rico.png) no-repeat; width: 24px; height: 24px; position: absolute; right: 18px; top: 50%; margin-top: -12px; }
.moreR:hover { background-color: #00944b; color: #fff; }
.moreR:hover .ico { right: 8px; background-image: url(../images/more_rico2.png); }
.productIpage { position: relative; }
.productIdemo .black { position: absolute; left: 0px; top: 0px; width: 50%; height: 100%; background: url(../images/black_2.png) repeat; background: none rgba(0,0,0,0.5); }
.productIList a:link, .productIList a:visited { color: #fff; }
.productIList a:active, .productIList a:hover { color: #fff; }
.productIList dd { color: #fff; }
.productIList a { position: relative; padding-left: 20%; height: 150px; display: block; float: left; }
.productIList .red-bg { position: absolute; left: 0px; top: 0px; width: 0%; height: 100%; background: url(../images/red_2.png) repeat; background: none rgba(0,148,75,0.9); transition: 300ms; -webkit-transition: 300ms; }
.productIList .ico { width: 140px;/* height: 80px;*/ position: absolute; left: 0px; top: 0px; padding: 35px 0px; }
.productIList .ico .bg { position: absolute; width: 100%; height: 100%; background-color: #00944b; left: 0px; top: 0px; transform: scale(0.5) rotate(0); -webkit-transform: scale(0.5) rotate(0); -moz-transform: scale(0.5) rotate(0); opacity: 0; transition: 600ms; -webkit-transition: 600ms; }
.productIList .ico .i { background: url(../images/ico.png); width: 80px; height: 80px; margin: 0px auto; position: relative; z-index: 5px; display: block; }
.productIList .ico .i1 { background-position: 0px 0px; }
.productIList .ico .i2 { background-position: 0px -80px; }
.productIList .ico .i3 { background-position: 0px -160px; }
.productIList .ico .i4 { background-position: 0px -240px; }
.productIList .ico .i5 { background-position: 0px -320px; }
.productIList .ico .i6 { background-position: 0px -400px; }
.productIList .con { display: block; padding: 0px 140px 0px 208px; width: 100%; position: relative; height: 150px; }
.productIList .t { font-size: 16px; line-height: 1.5; padding: 62px 0px 20px; transition: 300ms; -webkit-transition: 300ms;text-align: left; }
.productIList .t .zh { transition: 300ms; -webkit-transition: 300ms; }
.productIList .t .en i { padding-left: 5px; transition: 300ms; -webkit-transition: 300ms; background: url(../images/line.png) no-repeat scroll left center; margin: 0px 5px 0px 22px; }
.productIList .c { height: 25px; overflow: hidden; transition: 300ms; -webkit-transition: 300ms; opacity: 0; visibility: hidden; }
.productIList .line { display: block; background: #fff; position: absolute; transition: 300ms; -webkit-transition: 300ms; opacity: 0; visibility: hidden; }
.productIList .line_1 { width: 28px; height: 1px; top: 50%; right: 57px; margin-top: -1px; transform: translateX(30px); -webkit-transform: translateX(30px); }
.productIList .line_2 { width: 1px; height: 28px; top: 50%; margin-top: -14px; right: 70px; transform: translateY(30px); -webkit-transform: translateY(30px); }
.productIList a:hover .red-bg { width: 100%; transition: 600ms; -webkit-transition: 600ms; }
.productIList a:hover .line { transform: translate(0); -webkit-transform: translate(0); visibility: visible; opacity: 1; transition: 300ms ease-in 600ms; -webkit-transition: 300ms ease-in 600ms; }
.productIList a:hover .ico .bg { transform: scale(1) rotate(180deg); -webkit-transform: scale(1) rotate(180deg); -moz-transform: scale(1) rotate(180deg); opacity: 1; }
.productIList a:hover .t { padding-top: 30px; }
.productIList a:hover .t .zh { font-size: 22px; }
.productIList a:hover .t .en i { padding-left: 42px; }
.productIList a:hover .c { opacity: 1; visibility: visible; }
.telbox a:link, .telbox a:visited { color: #cd000f; }
.telbox a:active, .telbox a:hover { color: #cd000f; }
.telbox { text-align: center; color: #646464; background-color: #e0e0e0; padding: 20px 0px; overflow: hidden; }
.telbox .tel { padding-left: 45px; display: inline-block; }
.telbox .tel { font: 40px/1.4 "humanist_521_lightregular","microsoft yahei"; -webkit-animation: telc 1s linear infinite; animation: telc 1s linear infinite; color: #cd000f; }

@-webkit-keyframes telc {
    0% { -webkit-transform: scale(1); }
    25% { -webkit-transform: scale(1.08); }
    50% { -webkit-transform: scale(1.15); }
    75% { -webkit-transform: scale(1.08); }
    100% { -webkit-transform: scale(1); }
}

@-moz-keyframes telc {
    0% { -moz-transform: scale(1); }
    25% { -moz-transform: scale(1.08); }
    50% { -moz-transform: scale(1.15); }
    75% { -moz-transform: scale(1.08); }
    100% { -moz-transform: scale(1); }
}

@keyframes telc {
    0% { transform: scale(1); }
    25% { transform: scale(1.08); }
    50% { transform: scale(1.15); }
    75% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.serviceIlist a:link, .serviceIlist a:visited { color: #787878; }
.serviceIlist a:active, .serviceIlist a:hover { color: #fff; }
.serviceIlist { width: 1110px; margin: 52px auto 0px; }
.serviceIlist dd { float: left; display: block; width: 25%; margin-bottom: 35px; }
.serviceIlist a { width: 193px; height: 193px; position: relative; margin: 0px auto; display: block; }
.serviceIlist .y1 { background: url(../images/y1.png) no-repeat; }
.serviceIlist .y2 { background: url(../images/y2.png) no-repeat; }
.serviceIlist .y1, .serviceIlist .y2 { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; transition: all 0.5s ease 0s; -webkit-transform: all 0.5s ease 0s; z-index: 1; }
.serviceIlist .y2 { opacity: 0; transform: scale(0.7); -webkit-transform: scale(0.7); visibility: hidden; }
.serviceIlist .txt { position: absolute; top: 15%; z-index: 2; left: 0px; width: 100%; text-align: center; }
.serviceIlist .ico { width: 80px; height: 80px; margin: 0px auto; display: block; background: url(../images/ico2.png) no-repeat; z-index: 3; -webkit-transition: 0.4s; transition: 0.4s; }
.serviceIlist .bot { width: 0px; height: 1px; background-color: #fff; margin: 5px auto 15px; display: block; }
.serviceIlist .lin1 .ico { background-position: 0px 0px; }
.serviceIlist .lin2 .ico { background-position: 0px -80px; }
.serviceIlist .lin3 .ico { background-position: 0px -160px; }
.serviceIlist .lin4 .ico { background-position: 0px -240px; }
.serviceIlist .lin1 a:hover .ico { background-position: -80px 0px; }
.serviceIlist .lin2 a:hover .ico { background-position: -80px -80px; }
.serviceIlist .lin3 a:hover .ico { background-position: -80px -160px; }
.serviceIlist .lin4 a:hover .ico { background-position: -80px -240px; }
.serviceIlist a:hover .bot { width: 80px; }
.serviceIlist a:hover .y1 { opacity: 0; transform: scale(1.3); -webkit-transform: scale(1.3); }
.serviceIlist a:hover .y2 { opacity: 1; transform: scale(1); -webkit-transform: scale(1); visibility: visible; }
.serviceIcon { width: 670px; margin: 0px auto; text-align: center; color: #969696; line-height: 1.5; padding-bottom: 36px; }
.serviceIcon a:link, .serviceIcon a:visited { color: #323232; }
.serviceIcon a:active, .serviceIcon a:hover { color: #E60012; }
.transbg { background-repeat: no-repeat; background-size: cover; background-position: center center; background-attachment: fixed; }
